<template>
  <v-edit-title :element="element" :index="index" :total="total">
    <div v-for="(item, i) in element.content" :key="item.id" class="item">
      <a-checkbox :checked="item.checked" @change="onChange(item, i)" />
      <v-edit-span v-model="item.name" style="margin-left: 10px" />
      <a-icon type="close" class="red-icon" @click.stop="remove(i)" />
      <a-textarea
        v-if="item.questionChoiceType && item.checked"
        class="item_input"
        placeholder="填写内容..."
        :auto-size="{ minRows: 3, maxRows: 5 }"
      />
    </div>
    <a-button @click="add">新增内容</a-button>
  </v-edit-title>
</template>
<script>
export default {
  props: {
    element: {
      type: Object,
      default() {
        return {
          title: '',
          content: [],
          id: -1,
        }
      },
    },
    index: Number,
    total: Number,
  },
  data() {
    return {}
  },
  created() {
    console.log('content', this.element.content)
  },
  methods: {
    add() {
      const length = this.element.content.length + 1
      this.element.content.push({
        value: length,
        id: length,
        name: '新增的内容',
      })
    },
    remove(index) {
      this.element.content.splice(index, 1)
    },
    onChange(item, index) {
      item.checked = !item.checked
      this.forceUpdate(item, index)
      this.submit()
    },
    forceUpdate(item, index) {
      this.$set(this.element.content, index, item)
    },
    submit() {},
  },
}
</script>
<style lang="less" scoped>
.item {
  margin-bottom: 14px;
}
</style>
